<!-- <template>

	<uni-popup ref="popup" v-show='show' :mask-click="false">
		<view class="buyProp">
			<image src="@/static/statc-icon/close.png" class="closeImg" @tap="closeProp"></image>
			<view class="title">确认密码</view>
			<view class="numTitle">支付密码</view>
			<input placeholder="请输入支付密码" class="input-prop" placeholder-class="placeholder" password type="number"
				v-model="payPassword" />
			<view class="sures btnGradient" @tap="sure">确定</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'passWordPopup',
		props: {
			show:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				payPassword: '',
			}
		},
		watch:{
			show(newVal,oldVal){
				if(newVal){
					this.payPassword = ''
					this.$refs.popup.open('center')
				}else{
					this.$refs.popup.close()
				}
			}
		},
		methods:{
			sure(){
				this.$emit('callBack',this.payPassword)
			},
			closeProp(){
				this.$emit('close')
			}
		}
	}
</script>

<style scoped>
	.buyProp {
		padding-bottom: 40rpx;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.buyProp .closeImg {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 17rpx;
		right: 25rpx;
	}

	.buyProp .title {
		margin-top: 38rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1A1A1A;
		line-height: 42rpx;
	}

	.buyProp .numTitle {
		margin-top: 46rpx;
		width: 470rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 37rpx;
	}

	.buyProp .input-prop {
		padding-left: 20rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		margin-top: 12rpx;
		height: 68rpx;
		width: 470rpx;
		font-size: 24rpx;
	}

	.buyProp .placeholder {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #808080;
		line-height: 33rpx;
	}

	.buyProp .sures {
		margin-top: 60rpx;
		text-align: center;
		line-height: 86rpx;
		width: 470rpx;
		height: 86rpx;
		
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		
		border-radius: 16rpx;
	}

	.buyProp .codes {
		position: absolute;
		right: 43rpx;
		bottom: 210rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1777FF;
		line-height: 33rpx;
	}
</style> -->


<template>
	<uni-drawer ref="showRight" mode="right" v-show='show' :width="screenWidth" :mask-click="false">
		<view class="container">
			<view class="header">
				<uni-icons type="left" size="30" @click="handleGoBack"></uni-icons>
			</view>
			<view class="content">
				<image src="@/static/static-login/image-1.png" class='paySize' mode=""></image>
				<view class="text">
					输入6位数支付密码
				</view>
				<view class="page">
					<view>
						<view class="pay-password" @click="onPayUp">
							<view class="list" :class="{'activeText':passwordArr.length == 1}">
								<text v-show="passwordArr.length >= 1">●</text>
							</view>
							<view class="list" :class="{'activeText':passwordArr.length == 2}">
								<text v-show="passwordArr.length >= 2">●</text>
							</view>
							<view class="list" :class="{'activeText':passwordArr.length == 3}">
								<text v-show="passwordArr.length >= 3">●</text>
							</view>
							<view class="list" :class="{'activeText':passwordArr.length == 4}">
								<text v-show="passwordArr.length >= 4">●</text>
							</view>
							<view class="list" :class="{'activeText':passwordArr.length == 5}">
								<text v-show="passwordArr.length >= 5">●</text>
							</view>
							<view class="list" :class="{'activeText':passwordArr.length == 6}">
								<text v-show="passwordArr.length >= 6">●</text>
							</view>
						</view>
						<view class="hint">
							<text @click='handleForgetPassWord'>忘记支付密码？</text>
						</view>
					</view>
					<!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
					<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>

				</view>
			</view>
		</view>

	</uni-drawer>
</template>

<script>
	export default {
		name: 'payPage',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				screenWidth: null,

				passwordArr: [],


				afPasswordArr: [],
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.screenWidth = systemInfo.screenWidth; // 屏幕宽度
		},
		watch: {
			show(newVal, oldVal) {
				if (newVal) {
					this.passwordArr = []

					this.$refs.showRight.open('center')
					this.onPayUp()

				} else {
					this.$refs.showRight.close()
				}
			}
		},
		mounted() {
			// this.$refs.showRight.open('center')
		},
		methods: {
			handleGoBack() {
				this.$emit('close')
			},
			handleForgetPassWord() {
				uni.navigateTo({
					url: "/pages/set/modifyTransactionPassword"
				})
			},
			/** * 唤起键盘 */
			onPayUp() {
				this.$refs.CodeKeyboard.show();
			},
			/*** 支付键盘回调* @param {Object} val */

			/**
			 * 支付键盘回调
			 * @param {Object} val
			 */
			KeyInfo(val) {
				console.log('val', val)
				if (val.index >= 6) {

					this.$emit('callBack', this.payPassword)
					return;
				}
				// 判断是否输入的是删除键
				if (val.keyCode === 8) {
					// 删除最后一位
					this.passwordArr.splice(val.index + 1, 1)
				}
				// 判断是否输入的是.
				else if (val.keyCode == 190) {
					// 输入.无效
				} else {
					this.passwordArr.push(val.key);
				}

				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
				// })

				// 判断是否等于6
				if (this.passwordArr.length === 6) {


					this.afPasswordArr = this.passwordArr;

					this.$emit('callBack', this.passwordArr.join(''))

				}
				// // 判断到哪一步了
				// if (this.AffirmStatus === 1) {
				// 	this.oldPasswordArr = this.passwordArr;
				// } else if (this.AffirmStatus === 2) {
				// 	this.newPasswordArr = this.passwordArr;
				// } else if (this.AffirmStatus === 3) {

				// } else if (this.AffirmStatus === 4) {
				// 	console.log(this.oldPasswordArr.join(''));
				// 	console.log(this.newPasswordArr.join(''));
				// 	console.log(this.afPasswordArr.join(''));
				// 	uni.showToast({
				// 		title: '修改成功',
				// 		icon: 'none'
				// 	})
				// 	setTimeout(() => {
				// 		uni.navigateBack();
				// 	}, 2000)
				// }
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang='less' scoped>
	/deep/ .uni-drawer__content {
		width: 100vw;
	}

	.container {
		width: 100vw;
		height: 100vh;

	}

	.container .header {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content .paySize {
		width: 204rpx;
		height: 176rpx;
		margin-top: 40rpx;
	}

	.content .text {
		margin-top: 20rpx;
		font-weight: bold;
		font-size: 48rpx;
		color: #3C3C3C;
		margin-bottom: 80rpx;
	}

	/* 	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	} */



	.pay-title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;

		text {
			font-size: 28rpx;
			color: #555555;
		}
	}

	.pay-password {
		display: flex;
		align-items: center;
		width: 90%;
		height: 80rpx;
		margin: 20rpx auto;


		.list {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90rpx;
			height: 108rpx;
			background: #F6F6F4;
			border-radius: 16rpx;
			border-right: 2rpx solid #F6F6F4;

			text {
				font-size: 32rpx;
			}
		}

		.activeText {
			border: 2rpx solid #EB3B27 !important;
		}

		.list:not(:last-child) {
			margin-right: 20rpx;
		}

		.list:nth-child(6) {
			/* border-right: none; */
		}
	}

	.hint {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;


		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #EB3B27;
		}
	}
</style>